<template>
  <div>
    <div class="header">
      <div class="header-box">
        <div class="header-l">
          <van-icon name="arrow-left" />
          <span @click="backTo">返回</span>
        </div>

        <h2 class="header-m" @click="backTo">{{ txt }}</h2>
        <div></div>
      </div>

      <img class="img" :src="id == 1 ? imgs.hot : imgs.new" alt="" />
    </div>

    <div class="tab">
      <div
        class="order-l"
        :class="add == 'one' ? 'active' : ''"
        @click="addAct"
      >
        综合
      </div>
      <div class="order-m" @click="order">
        <span class="order-txt" :class="flag == 'up' ? 'active' : ''"
          >价格</span
        >
        <div class="box">
          <van-icon :color="flag == 'up' ? '#deb12a' : ''" name="arrow-up" />
          <van-icon
            :color="flag == 'down' ? '#deb12a' : ''"
            name="arrow-down"
          />
        </div>
      </div>
      <div
        class="order-r"
        @click="addAct1"
        :class="add == 'three' ? 'active' : ''"
      >
        综合
      </div>
    </div>

    <div>
      <ul class="goodList">
        <li class="goodList-item" v-for="item in list" :key="item.id" @click="toDetail(item.id)">
          <img class="img" :src="item.list_pic_url" alt="" />
          <div class="goods-txt">
            <span class="txt-t">{{ item.name }}</span>
            <span class="txt-b">
              {{ item.retail_price }}
            </span>
          </div>
        </li>
        <li ></li>
      </ul>
    </div>
  </div>
</template>

<script>
import { hotNew } from "../../../api/home";
export default {
  name: "homeList",
  data() {
    return {
      id: "",
      list: [],
      flag: "def",
      add: "one",
      txt: "",
      imgs: {
        new: "http://jinglins.gitee.io/bufan-tesco-mall/assets/new-list-banner-b691c95d.png",
        hot: "http://jinglins.gitee.io/bufan-tesco-mall/assets/hot-list-banner-ccf22d3f.png",
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.id = this.$route.query.id;
      if (this.id == 1) {
        this.txt = "新品首发";
      } else {
        this.txt = "人气推荐";
      }
      hotNew({
        isNew: this.id == 1 ? 1 : "",
        isHot: this.id == 2 ? 1 : "",
        order: "",
      }).then((res) => {
        console.log(res);
        this.list = res.data;
      });
    },
    backTo() {
      this.$router.back();
    },
    backTo() {
      this.$router.back();
    },
    order() {
      this.add = "";
      if (this.flag == "def") {
        this.flag = "up";
      } else if (this.flag == "up") {
        this.flag = "down";
      } else {
        this.flag = "up";
      }
      console.log(this.flag);
      hotNew({
        isNew: this.id == 1 ? 1 : "",
        isHot: this.id == 2 ? 1 : "",
        order: this.flag == "up" ? "asc" : "desc",
      }).then((res) => {
        console.log(res);
        this.list = res.data;
      });
    },
    addAct() {
      this.flag = "";
      this.add = "one";
      this.init();
    },
    addAct1() {
      this.flag = "";
      this.add = "three";
      this.init();
    },
    toDetail(id){
      this.$router.push({path:'/home/goodsDetail',query:{id:id}})
    }
  },
};
</script>

<style scoped lang="scss">
@import "./scss/index.scss";
</style>>